<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
	<style type="text/css">
        #div1{
       	   width:200px;height:200px;background: red;opacity:30;
        }
	</style>
	<script type="text/javascript">
        window.onload = function(){
        	var oDiv = document.getElementById('div1');

        	oDiv.onmouseover = function(){
        		startMove(100);
        	}
        	oDiv.onmouseout = function(){
        		startMove(30);
        	}
        }


        var timer = '';
        var alpha = 30;  //定个变量，值和默认值一样
            
        
        function startMove(iTarget){
        	var oDiv = document.getElementById('div1');

            var speed = 0;
        	if(alpha<iTarget){
        		speed = 10;
        	}else{
        		speed = -10;
        	}
        	clearInterval(timer);
    		timer = setInterval(function(){
                if(alpha == iTarget){
                	clearInterval(timer);
                }else{
                	alpha += speed;
                	oDiv.style.opacity = alpha/100;
                }
    		},30);
    	}
	</script>
</head>
<body>
	<div id="div1"></div>
</body>
</html>